<template>
    <div class="horizontal-container">
        <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content" >
            <div  class="scroll-item" v-for="(item,index) in timeList" :key="index">
                <img :src="item.small_image" alt="" @click="onShopAdd(item)">
                <p class="title">{{item.name}}</p>
                <div class="btm">
                    <div class="priceBox">
                            <p class="price">￥{{item.price}}</p>
                            <p class="noprice">￥{{item.origin_price}}</p>
                    </div>
                    <van-icon @click="onAdd" name="shopping-cart-o" class="shop_icon"/>
                </div>
               
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import BScroll from '@better-scroll/core'
export default {
    name:"HomeText",
     data () {
      return {
        //限时抢购列表
        timeList:[]
      }
    },
    async created(){
        let res= await this.$http.getHomeApi();
        this.timeList=res.data.data.list[3].product_list;
    },
    async mounted() {
      this.init()
    },
    beforeDestroy() {
      this.bs.destroy()
    },
    methods: {
      init() {
        this.bs = new BScroll(this.$refs.scroll, {
          scrollX: true,
          probeType: 3 
        })
        this.bs.on('scrollStart', () => {
          // console.log('scrollStart-')
        })
        this.bs.on('scroll', () => {
          // console.log('scrolling-')
        })
        this.bs.on('scrollEnd', () => {
          // console.log('scrollingEnd')
        })
      },
      // 点击提示成功加入购物车：
      onAdd(){
        Toast('成功加入购物车');
      },
      //点击进入详情页
      onShopAdd(prot){
        this.$store.commit('onAdd',prot);
        this.$router.push('cont')
      }
    }
}
</script>

<style lang="scss" >
    *{
        margin:0;
        padding:0;
        list-style: none;
    }
    .scroll-wrapper{
        position: relative;
        width: 100%;
        margin:0 auto;
        height:4rem;
        white-space: nowrap;
        border-radius: 5px;
        overflow: hidden;
    }
    .scroll-content{
    
        display: inline-block;
    }
    .scroll-item{
        height:auto;
        width:2.2rem;
        display: inline-block;
        text-align: center;
        padding: 0 10px;
    }
    .title{
        width:2rem;
        margin:0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;  //使用自适应布局
        line-clamp: 2;
        -webkit-line-clamp: 2;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
        -webkit-box-orient: vertical;   
        text-align: center;
        font-size: .2rem;
    }
    img{
        width:auto;
        height: 2rem;
        display: block;
        margin:0 auto;
    }
    .price{
        color:#f50;
        text-align: left;
        margin-left:.1rem;
        font-size: .35rem;
    }
    .noprice{
        text-decoration: line-through;
         margin-left:.15rem;
        text-align: left;
        font-size: .2rem;
        color:#999;
    }
    .btm{
        margin-top:.1rem;
        width:2rem;
        display: flex;
        justify-content: space-between;
    }
    .shop_icon{
        font-size: .55rem;
        color:#42b95f;
        // margin-top:.1rem;
    }
      .van-tabs__line{
    background-color: transparent;
  }
</style>